<template>
    <div class="container">
        <!-- 导航栏 -->
        <AtjHeader />

        <div class="intro-container">
            <!-- 个人信息卡片 -->
            <div class="profile-card">
                <div class="profile-header">
                    <div class="profile-avatar">
                        <img src="@/assets/img/avatar.jpg" alt="头像">
                    </div>
                    <h2>凹兔基</h2>
                    <p class="profile-title">全栈开发工程师</p>
                </div>
                <div class="profile-info">
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>中国，北京</span>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <span>example@email.com</span>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-graduation-cap"></i>
                        <span>计算机科学与技术</span>
                    </div>
                </div>
                <div class="social-links">
                    <a href="#" class="social-link github">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="social-link twitter">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="social-link linkedin">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </div>
            </div>

            <!-- 个人简介 -->
            <div class="about-section">
                <h3>关于我</h3>
                <p>热爱编程，专注于Web开发和人工智能领域。具有5年以上的开发经验，擅长前端和后端开发。</p>
                
                <!-- 技能展示 -->
                <div class="skills-section">
                    <!-- 技能进度条 -->
                    <div v-for="(skill, index) in skills" 
                        :key="index" 
                        class="skill-item">
                    <div class="skill-info">
                        <h4>{{ skill.name }}</h4>
                        <div class="skill-bar">
                        <div class="skill-progress"
                            :style="{ width: skill.progress + '%' }"
                            ref="skillBars"></div>
                        </div>
                    </div>
                    </div>
                </div>

                <!-- 工作经历 -->
                <div class="experience-section">
                    <h3>工作经历</h3>
                    <div class="timeline">
                        <div v-for="(item, index) in timelineData" 
                            :key="index"
                            class="timeline-item"
                            :class="{ visible: item.isVisible }"
                            ref="timelineItems">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <h4>{{ item.title }}</h4>
                            <p class="company">{{ item.company }}</p>
                            <p class="period">{{ item.period }}</p>
                            <p class="description">{{ item.description }}</p>
                        </div>
                        </div>
                    </div>
                </div>

                <!-- 项目展示 -->
                <div class="projects-section">
                    <h3>个人项目</h3>
                    <div class="projects-grid">
                        <div v-for="(project, index) in projects" 
                            :key="index"
                            class="project-card"
                            :class="{ hover: hoveredCard === index }"
                            @mouseenter="setHoverState(index)"
                            @mouseleave="setHoverState(null)">
                        <div class="project-image">
                            <img :src="project.image" :alt="project.title">
                        </div>
                        <div class="project-info">
                            <h4>{{ project.title }}</h4>
                            <p>{{ project.description }}</p>
                            <div class="project-links">
                            <a :href="project.githubLink" class="project-link">
                                <i class="fab fa-github"></i> GitHub
                            </a>
                            <a :href="project.demoLink" class="project-link">
                                <i class="fas fa-external-link-alt"></i> Demo
                            </a>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; 2024 我的博客. All rights reserved.</p>
        </footer>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineComponent, onMounted } from 'vue';
import AtjHeader from '@/components/AtjHeader.vue'
defineComponent({
  name: 'IntroduceView',
});
// 技能进度条动画
const skillBars = ref<HTMLElement[]>([]);
const timelineItems = ref<HTMLElement[]>([]);
// 技能数据
const skills = ref([
  { name: 'JavaScript', progress: 90 },
  { name: 'Vue.js', progress: 85 },
  // ... 其他技能
]);

// 时间线数据
const timelineData = ref([
  {
    title: '高级前端开发工程师',
    company: '某科技公司',
    period: '2020 - 至今',
    description: '负责公司核心产品的前端开发工作，优化用户体验，提升产品性能。',
    isVisible: false
  },
  // ... 其他时间线项目
]);

// 项目数据
const projects = ref([
  {
    title: '个人博客系统',
    description: '基于Vue.js和Node.js开发的现代化博客系统',
    image: '@/assets/img/avatar.jpg',
    githubLink: '#',
    demoLink: '#'
  },
  // ... 其他项目
]);
onMounted(() => {
  // 技能进度条动画
  skillBars.value.forEach(bar => {
    const width = bar.style.width;
    bar.style.width = '0';
    setTimeout(() => {
      bar.style.width = width;
    }, 500);
  });

  // 时间线动画
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, {
    threshold: 0.5
  });

  timelineItems.value.forEach(item => {
    observer.observe(item);
  });
});

// 项目卡片悬浮状态
const hoveredCard = ref<number | null>(null);

// 设置悬浮状态
const setHoverState = (index: number | null) => {
  hoveredCard.value = index;
};
</script>
<style lang="less" scoped>
@import '@/assets/css/universal.css';
/* 主容器样式 */
.intro-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

/* 个人信息卡片 */
.profile-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 20px;
    height: fit-content;
}

.profile-header {
    text-align: center;
    margin-bottom: 30px;
}

.profile-avatar {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #1a73e8;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-title {
    color: #666;
    font-size: 1.1em;
    margin-top: 5px;
}

.profile-info {
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #666;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.github { background-color: #333; }
.twitter { background-color: #1DA1F2; }
.linkedin { background-color: #0077B5; }

.social-link:hover {
    transform: translateY(-3px);
}

/* 关于部分 */
.about-section {
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 技能部分 */
.skills-section {
    margin-top: 40px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.skill-icon {
    width: 40px;
    height: 40px;
    background-color: #f0f7ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a73e8;
    font-size: 1.5em;
}

.skill-info {
    flex: 1;
}

.skill-bar {
    height: 6px;
    background-color: #f0f7ff;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background-color: #1a73e8;
    border-radius: 3px;
    transition: width 1s ease;
}

/* 工作经历 */
.timeline {
    position: relative;
    margin-top: 30px;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #1a73e8;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.timeline-dot {
    position: absolute;
    left: -34px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #1a73e8;
    border: 2px solid #fff;
}

/* 项目展示 */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.project-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.project-image {
    height: 200px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-info {
    padding: 20px;
}

.project-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.project-link {
    padding: 8px 15px;
    background-color: #f0f7ff;
    color: #1a73e8;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.project-link:hover {
    background-color: #1a73e8;
    color: #fff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .intro-container {
        grid-template-columns: 1fr;
    }

    .profile-card {
        position: static;
    }

    .skills-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }
}
</style>